<script setup lang="ts">
import { computed, ref } from 'vue';
import ProjectCardItem from './ProjectCardItem.vue';
import { useResumeStore } from '@/stores/ResumeStore';
import { storeToRefs } from 'pinia';
import MyPaginate from './MyPaginate.vue';

const itemsPerPage = 3;
const currentPage = ref(1);
const resumeStore = useResumeStore();
const { resume } = storeToRefs(resumeStore);

const project = ref([
  {
    name: '智慧校园',
    description: '',
    workType: {
      text: '自研产品',
      color: 'bg-sky-500',
    },
    skill: ['Vue', 'ElementUI'],
  },
  {
    name: '智慧校园App',
    description: '',
    workType: {
      text: '自研产品',
      color: 'bg-sky-500',
    },
    skill: ['Uniapp', 'ThorUI'],
  },
  {
    name: '贵州省医疗废物收运平台',
    description: '',
    language: 'Typescript',
    workType: {
      text: '政企项目',
      color: 'bg-red-500',
    },
    skill: ['Vue3', 'Vite', 'ElementUI'],
  },
  {
    name: '零废铺子小程序',
    description: '',
    language: 'Typescript',
    workType: {
      text: '政企项目',
      color: 'bg-red-500',
    },
    skill: ['微信小程序'],
  },
  {
    name: '天之源企业医废项目',
    description: '',
    language: 'Typescript',
    workType: {
      text: '企业内部项目',
      color: 'bg-teal-500',
    },
    skill: ['Vue', 'ElementUI'],
  },
  {
    name: 'JujiuTodo',
    description: '',
    language: 'Typescript',
    workType: {
      text: '个人开源',
      color: 'bg-violet-500',
    },
    skill: ['Vben', 'SpringBoot', 'MySql'],
  },
  {
    name: 'apifox-to-demo',
    description: '',
    language: 'Typescript',
    workType: {
      text: '个人开源',
      color: 'bg-violet-500',
    },
    skill: ['Vue', 'Ant Desing Vue'],
  },
]);

const total = computed(() => {
  return project.value.length;
});

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return project.value.slice(start, end);
});

function onPageChange(page: number) {
  currentPage.value = page;
}
</script>
<template>
  <div class="card">
    <h2 class="mb-5 text-lg font-semibold dark:text-night-50">项目经历</h2>
    <!-- Project 1 -->
    <ProjectCardItem
      v-for="(item, index) of paginatedItems"
      :item="item"
      :key="index"
      :separator="paginatedItems.length > index + 1" />
    <!-- Paginate  -->
    <MyPaginate :totalItems="total" :itemsPerPage="itemsPerPage" :maxVisibleButtons="3" @pagechanged="onPageChange" />
  </div>
</template>
